<template>
  <div class="activities-admin">
    <!-- 筛选头部 -->
    <div class="search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="search-form">
        <el-form-item label="活动名称：">
          <el-input v-model="searchInfo.name" size="medium" clearable placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="medium" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 活动列表 -->
    <div class="ad-list-wrapper">
      <div class="ad-list">
        <el-menu default-active="1" class="menu-header" mode="horizontal" @select="menuHandleSelect">
          <el-menu-item index="1">平台活动报名</el-menu-item>
          <el-menu-item index="2">已报名的活动</el-menu-item>
        </el-menu>
        <!-- 平台活动报名 -->
        <div v-show="showMenuBodyIndex === 1" v-loading="loading1">
          <div v-if="activities.length === 0" class="none">
            暂无平台活动～
          </div>
          <table v-else width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr><th class="img">活动图片</th><th>活动名称</th><th class="type">活动类型</th><th class="sign-date">报名时间</th><th class="date">活动起止时间</th><th class="sign-state">报名状态</th><th class="func">操作</th></tr>
            </thead>
            <tbody>
              <tr v-for="ac in activities" :key="ac.id" class="ad-list-item">
                <td><el-image style="width: 300px; height: 100px" :src="qnPath(ac.image)" fit="fit" /></td>
                <td>
                  <p class="name">{{ ac.name }}</p>
                  <p v-if="ac.sign === '0'" class="tips"><svg-icon icon-class="fire" /> &nbsp;火热报名中</p>
                  <p v-else class="tips">您已报名</p></td>
                <td v-if="ac.type === '02200001'">折扣-{{ ac.disCount }}折</td>
                <td class="sign-date">
                  <p>{{ new Date(ac.signStartDate) | getDate }}至{{ new Date(ac.signEndDate) | getDate }}</p>
                  <p v-if="ac.signEndtDate - parseInt(new Date().getTime()) > 0" class="times"><span>{{ (ac.signEndtDate - ac.signStartDate) | formatDays }}</span>天<span>{{ (ac.signEndtDate - ac.signStartDate) | formatHours }}</span>时<span>{{ (ac.signEndtDate - ac.signStartDate) | formatMins }}</span>分</p>
                </td>
                <td class="date">
                  <p>{{ new Date(ac.beginDate) | getDate }}至{{ new Date(ac.finishDate) | getDate }}</p>
                </td>
                <td class="sign-state" :style="{'color': ac.sign === '2' ? '#2EC290' : ac.sign === '3' ? '#F56A6D' : '#3C4353' }">{{ ac.sign === '0' ? '未报名' : ac.sign === '1' ? '审核中' : ac.sign === '2' ? '报名成功' : '审核未通过' }}</td>
                <td class="func">
                  <router-link v-if="ac.sign === '0'" :to="{name: 'ActivitySign', params: { id: ac.id}}"><el-button type="primary" size="small">立即报名</el-button></router-link>
                  <router-link v-else :to="{name: 'ActivitySign', params: { id: ac.id}}"><el-button type="text">查看详情</el-button></router-link>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              :current-page.sync="currentPage1"
              :page-size="pageSize1"
              layout="prev, pager, next, sizes, jumper"
              :total="activityCount1"
              :hide-on-single-page="true"
              :page-sizes="[10, 20, 30]"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
        <!-- 已报名的活动 -->
        <div v-show="showMenuBodyIndex === 2" v-loading="loading2">
          <div v-if="signSucAcList.length === 0" class="none">
            您还没报名任何活动～
          </div>
          <table v-else width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr><th class="img">活动图片</th><th>活动名称</th><th class="type">活动类型</th><th class="date">活动起止时间</th><th class="sign-pdt-count">参与商品数量</th><th class="func">操作</th></tr>
            </thead>
            <tbody>
              <tr v-for="ac in signSucAcList" :key="ac.id" class="ad-list-item">
                <td><el-image style="width: 300px; height: 100px" :src="qnPath(ac.image)" fit="fit" /></td>
                <td>
                  <p class="name">{{ ac.name }}</p>
                  <p v-if="ac.finishDate - parseInt(new Date().getTime()) > 0" class="tips tips2">进行中</p>
                  <p v-else class="tips tips2 end">已结束</p>
                </td>
                <td v-if="ac.type === '02200001'">折扣-{{ ac.disCount }}折</td>
                <td class="sign-date">
                  <p>{{ new Date(ac.beginDate) | getDate }}至{{ new Date(ac.finishDate) | getDate }}</p>
                  <p v-if="ac.finishDate - parseInt(new Date().getTime()) > 0" class="times">
                    <span>{{ (ac.finishDate - ac.beginDate) | formatDays }}</span>天
                    <span>{{ (ac.finishDate - ac.beginDate) | formatHours }}</span>时
                    <span>{{ (ac.finishDate - ac.beginDate) | formatMins }}</span>分
                  </p>
                </td>
                <td class="sign-pdt-count">{{ ac.mdseSize }}个</td>
                <td class="func">
                  <router-link :to="{name: 'ActivitySign', params: { id: ac.id}}"><el-button type="text">查看详情</el-button></router-link>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              :current-page.sync="currentPage2"
              :page-size="pageSize2"
              layout="prev, pager, next, sizes, jumper"
              :total="activityCount2"
              :hide-on-single-page="true"
              :page-sizes="[10, 20, 30]"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getAdminList, getSignedAdminList } from '@/api/activity';
export default {
  name: 'ActivitiesAdmin',
  filters: {
    formatHours: value => { // 毫秒差转'Y时'
      return parseInt(Math.abs(value) / 1000 / 60 / 60) % 24;
    },
    formatMins: value => { // 毫秒差转'X天Y时Z分'
      return parseInt(Math.abs(value) / 1000 / 60) % 60;
    },
    formatDays: value => { // 毫秒差转'X天Y时Z分'
      return parseInt(Math.abs(value) / 1000 / 60 / 60 / 24);
    }
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      canRequst1: true,
      canRequst2: true,
      searchInfo: {
        name: ''
      },
      showMenuBodyIndex: 1,
      activities: [],
      signSucAcList: [],
      // 分页
      pageSize1: 4,
      pageSize2: 4,
      currentPage1: 1,
      activityCount1: 1,
      currentPage2: 1,
      activityCount2: 1
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  mounted() {
    this.getAdminList();
    this.getSignedAdminList();
  },
  methods: {
    getAdminList() {
      const status = this.shopInfo.shoptype;
      const searchName = this.searchInfo.name;
      const shopId = this.shopInfo.id;
      const pageSize = this.pageSize1;
      const pageNo = this.currentPage1;
      this.loading1 = true;
      this.canRequst1 && new Promise((resolve, reject) => {
        getAdminList({ status, searchName, shopId, pageSize, pageNo }).then(res => {
          this.activities = res.data.activity;
          this.activityCount1 = res.data.size;
          this.canRequst1 = false;
          this.loading1 = false;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    getSignedAdminList() {
      const searchName = this.searchInfo.name;
      const shopId = this.shopInfo.id;
      const pageSize = this.pageSize2;
      const pageNo = this.currentPage2;
      this.loading2 = true;
      this.canRequst2 && new Promise((resolve, reject) => {
        getSignedAdminList({ searchName, shopId, pageSize, pageNo }).then(res => {
          this.signSucAcList = res.data.activity;
          this.activityCount2 = res.data.size;
          this.canRequst2 = false;
          this.loading2 = false;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    toSearch() {
      switch (this.showMenuBodyIndex) {
        case 1:
          this.getAdminList();
          break;
        default:
          this.getSignedAdminList();
      }
    },
    menuHandleSelect(key, keyPath) {
      Object.assign(this.$data.searchInfo, this.$options.data().searchInfo);
      this.showMenuBodyIndex = key++;
      this.getAdminList();
    },
    // 分页
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.currentPage1 = 1;
      this.canRequst1 = true;
      this.getAdminList();
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.canRequst1 = true;
      this.getAdminList();
    },
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.currentPage2 = 1;
      this.canRequst2 = true;
      this.getSignedAdminList();
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val;
      this.canRequst2 = true;
      this.getSignedAdminList();
    }
  }
};
</script>
<style lang="scss" scoped>
.activities-admin {
  font-size: $fontSizeBase;
  color: $textColorDark;
  height: 100%;
  line-height: 1.6;
  p {
    padding: 0;
    margin: 0;
  }
}

.search-box {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-bottom: 10px;

  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}

.ad-list-wrapper {
  background-color: #fff;
  padding: 0 35px 35px 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 285px);
  .none {
    min-height: 54vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.menu-header {
  margin-bottom: 30px;
}

.ad-list {
  table {
    width: 100%;
    float: none;

    th,
    td {
      text-align: left;
      &:first-child {
        padding-left: 20px;
      }
    }

    th {
      height: 50px;
      background-color: #F6F8F9;
    }

    td {
      border-bottom: 1px solid $borderColor;
      padding: 20px 5px;
      vertical-align: top;

      .times {
        font-size: $fontSizeBase;
        color: $textColorBase;
        margin-top: 8px;

        span {
          color: #F75757;
          padding: 0 2px;
        }
      }
      .el-button--text{
        padding: 0;
      }
    }
    .img {
      width: 350px;
    }
    .name{
      max-width: 210px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .tips{
      display: inline-block;
      color: #F56A6D;
      line-height: 24px;
      padding: 0 8px;
      height: 24px;
      border-radius: 11px;
      background-color: #FFEAEA;
      margin-top: 14px;
      &.tips2{
        color:#1890FF;
        background-color: #E8F1FF;
        &::before{
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #1182FB;
          border: 2px solid #1182FB;
          margin-right: 6px;
          margin-top: -2px;
        }
      }
      &.end{
        color:#A8ABB8;
        &::before{
          display: none;
        }
      }
    }
    .sign-state,
    .type,
    .func {
      min-width: 100px;
    }

    .sign-state,
    .func {
      text-align: center;
    }
  }
}
.pagination {
  margin-top: 30px;
  text-align: center;
}

</style>
